<template>
  <a-modal
    v-model:open="dialogVisible"
    :footer="null"
    :width="800"
    :bodyStyle="{ height: scrollHeight, padding: '0' }"
    :maskClosable="false"
    :keyboard="false"
    :closable="false"
    :fullscreen="fullScreen"
    class="user-ext-dialog"
  >
    <template #title>
      <div style="display: flex; justify-content: space-between; align-content: center; height: 23px; box-sizing: border-box">
        <div style="font-size: 1.2em">预览</div>
        <div style="display: flex; flex-direction: row; justify-content: center">
          <div @click.stop="requestFullScreen" class="full-screen btn">
            <s-v-g-icon style="width: 20px; height: 20px"
                        :name="fullScreen ? 'FullScreenMinimize' : 'FullScreenMaximize'"/>
          </div>
          <div @click.stop="handleDialogClosed" class="close btn">
            <s-v-g-icon style="width: 20px; height: 20px" name="close"/>
          </div>
        </div>
      </div>
    </template>
    <a-scrollbar :style="{ height: scrollHeight }">
      <pre><code ref="previewCodeRef" class="language-html" v-html="hlHtml"></code></pre>
    </a-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <a-button type="primary" @click="handleCopyCode">复制</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script>
import { ref, computed, watch } from "vue"
import SVGIcon from "@/components/common/SVGIcon.vue"
import HighLightJS from "highlight.js"
import 'highlight.js/styles/github.css'
import Clipboard from "clipboard"

export default {
  name: 'TextPreview',
  components: {
    SVGIcon
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    language: {
      type: String,
      default: "xml"
    },
    code: {
      type: String,
      default: "&nbsp;"
    }
  },
  emits: ["update:visible"],
  setup(props, { emit }) {
    const dialogVisible = ref(props.visible)
    watch(() => props.visible, () => dialogVisible.value = props.visible)

    const hlHtml = computed(() => {
      const result = HighLightJS.highlight(props.code || "", {
        language: props.language,
        ignoreIllegals: true
      })
      return result.value || '&nbsp;'
    })

    const fullScreen = ref(false)
    function requestFullScreen() {
      fullScreen.value = !fullScreen.value
    }

    const scrollHeight = computed(() => {
      if (fullScreen.value) {
        return "calc(100vh - 54px - 64px - 40px)"
      } else {
        return "calc(100vh - 54px - 64px - 30vh - 40px)"
      }
    })

    function handleDialogClosed() {
      dialogVisible.value = false
      emit("update:visible", false)
    }

    const previewCodeRef = ref()

    function handleCopyCode() {
      dialogVisible.value = false
      Clipboard.copy(props.code, {
        container: previewCodeRef.value
      })
    }

    return {
      dialogVisible,
      hlHtml,
      fullScreen,
      requestFullScreen,
      scrollHeight,
      handleDialogClosed,
      previewCodeRef,
      handleCopyCode
    }
  }
}
</script>

<style scoped>
div.btn {
  cursor: pointer;
}

div.btn + div.btn {
  cursor: pointer;
  margin-left: 10px;
}

div.btn:hover {
  color: var(--ant-primary-color)
}

.dialog-footer {
  display: flex;
  justify-content: space-around;
}
</style>